
<!-- 内容 -->
<template>
  <div class="page">
    <div class="content">
      <div class="top-buttons">
        <el-row>
          <el-col :span="8">
            <div class="ct-type">
              <el-button type="text" @click>小红书</el-button>
              <el-button type="text" @click>已打|5163</el-button>
              <el-button type="text" @click>非广告|5163</el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="ct-type">
              <el-button type="text" @click>抖音</el-button>
              <el-button type="text" @click>已打|5163</el-button>
              <el-button type="text" @click>非广告|5163</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="line"></div>
      <div class="input-bar">
        <el-input class="input-bar-item input-bar-inputtf" type="text" placeholder="请输入或者选择链接" />
        <el-button class="input-bar-item" @click>品牌搜索</el-button>
        <el-select class="input-bar-item" placeholder="选择产品"></el-select>
        <el-input class="input-bar-item input-bar-inputtf" type="text" placeholder="请输入多个关键词|隔开" />
        <el-dropdown class="input-bar-item input-bar-downup">
          <span class="el-dropdown-link">
            创造力
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>5</el-dropdown-item>
            <el-dropdown-item>4</el-dropdown-item>
            <el-dropdown-item>3</el-dropdown-item>
            <el-dropdown-item>2</el-dropdown-item>
            <el-dropdown-item>1</el-dropdown-item>
            <el-dropdown-item>0</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="input-bar-item input-bar-downup">
          <span class="el-dropdown-link">
            关联性
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>5</el-dropdown-item>
            <el-dropdown-item>4</el-dropdown-item>
            <el-dropdown-item>3</el-dropdown-item>
            <el-dropdown-item>2</el-dropdown-item>
            <el-dropdown-item>1</el-dropdown-item>
            <el-dropdown-item>0</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="input-bar-item input-bar-downup">
          <span class="el-dropdown-link">
            好感度
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>5</el-dropdown-item>
            <el-dropdown-item>4</el-dropdown-item>
            <el-dropdown-item>3</el-dropdown-item>
            <el-dropdown-item>2</el-dropdown-item>
            <el-dropdown-item>1</el-dropdown-item>
            <el-dropdown-item>0</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button class="input-bar-item input-bar-button" type="primary" @click>添加</el-button>
      </div>
      <div class="line"></div>
      <div class="list-filter-bar">
        <el-row class="list-filter-bar-bg" gutter="20">
          <el-col :span="8">
            <div class="list-filter-bar-item">
              <el-button class="list-filter-bar-item-button" type="text" @click>最新</el-button>
              <el-button class="list-filter-bar-item-button" type="text" @click>最热</el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="list-filter-bar-item">
              <el-button class="list-filter-bar-item-button" type="text" @click>选择日期</el-button>
              <el-date-picker
                class="list-filter-bar-item-button"
                v-model="value1"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="list-filter-bar-item">
              <el-button class="list-filter-bar-item-button" type="text" @click>小红书</el-button>
              <el-button class="list-filter-bar-item-button" type="text" @click>抖音</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="list">
        <el-row gutter="15">
          <el-col :span="4" v-for="n in 30" :key="n">
            <div class="list-item"></div>
          </el-col>
        </el-row>
      </div>
      <div class="bottom">
        <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.page {
  background-color: #f5f5f5;
}
.content {
  margin: 20px;
  display: flex;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top-buttons {
  background-color: #fff;
}
.ct-type {
  height: 100%;
  margin-left: 40px;
}

.line {
  height: 1px;
  background-color: #f1f1f1;
}

.input-bar {
  padding: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-bar-item {
  margin-left: 5px;
  margin-right: 5px;
}

.input-bar-inputtf {
  max-width: 310px;
}
.input-bar-button {
  width: 120px;
  margin-left: 20px;
  color: white;
}

.input-bar-downup {
  width: 90px;
  margin-left: 15px;
}

.list-filter-bar {
  padding: 10px;
  background-color: #fff;
}
.list-filter-bar-bg {
  border-radius: 10px;
  border: 1px solid #f1f1f1;
}

.list-filter-bar-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.list-filter-bar-item-button {
  margin-right: 10px;
}

.list {
  background-color: #fff;
  padding: 10px;
  overflow-y: auto;
  height: 880px;
}

.list-item {
  margin-top: 20px;
  height: 230px;
  background-color: rgb(222, 67, 67);
}

.bottom {
  background-color: #fff;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

button {
  color: #666666;
  font-weight: normal;
}
</style>